<template>
  <div class="container">
    <headMenu />
    <a-card class="general-card" :title="'查询' + $t(menusName)">
      <!--  查询   -->
      <!-- <a-row>
        <a-col :flex="1">
          <a-form :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">
            <a-row :gutter="18">
              <a-col :span="9">
                <a-form-item field="number" label="主键">
                  <a-input placeholder="主键" v-model="pageData.id" />
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item field="name" label="名称">
                  <a-input v-model="pageData.name" placeholder="名称" />
                </a-form-item>
              </a-col>

              <a-col :span="9">
                <a-form-item field="createdTime" :label="$t('searchTable.form.createdTime')">
                  <a-range-picker style="width: 100%" v-model="pageData.createdTime" />
                </a-form-item>
              </a-col>

            </a-row>
          </a-form>
        </a-col>

        <a-col :flex="'86px'" style="text-align: right; position: relative; right: 200px">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              {{ $t('searchTable.form.search') }}
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              {{ $t('searchTable.form.reset') }}
            </a-button>
          </a-space>
        </a-col>
      </a-row> -->

      <!--  渲染数据  -->
      <a-spin :loading="loading" tip="This may take a while..." style="width: 100%">
        <a-table row-key="urId" :bordered="false" :data="data" @selection-change="selectionChange"
          style="margin-top: 30px" :pagination="false" :hoverable="true">
          <template #columns>

            <a-table-column data-index="ogUserName" title="用户名">
              <template #cell="{ record }">
                <a-badge status="success" :text="record.ogUserName" />
              </template>
            </a-table-column>
            <a-table-column data-index="ogOnlineTime" title="时间">
            </a-table-column>
            <a-table-column data-index="ogEquipment" title="设备">
            </a-table-column>
            <a-table-column data-index="ogIp" title="ip"> </a-table-column>

            <a-table-column title="操作">
              <template #cell="{ record }">
                <a-popconfirm @ok="submitDelete(record.ogId)" content="Are you sure you want to delete?">
                  <a-button type="outline">下线</a-button>
                </a-popconfirm>
              </template>
            </a-table-column>
          </template>
        </a-table>

        <!--  分页  -->
        <a-pagination :total="pageData.totalCount" show-jumper show-page-size show-total show-current
          :current="pageData.page" :page-size="pageData.limit" :page-size-options="[10, 20, 50, 100]" @change="changePage"
          @page-size-change="limitChange" />
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import api from '@/api/sys/tonlinelisting';
import headMenu from '@/components/headMenu/headMenu.vue';
export default {
  components: { headMenu },
  data() {
    return {
      form: {},
      loading: true,
      deleteIds: [],
      ediVisible: false,
      menusName: this.$router.currentRoute.value.meta.locale,
      pageData: {
        id: '',
        name: '',
        createTime: '',
        endTiem: '',
        status: '',
        page: '1',
        limit: 10,
        totalCount: 0,
        totalPage: 0,
      },

      data: [],
    };
  },

  methods: {
    /**
     * 取消弹窗
     */
    handleCancel() {
      this.ediVisible = false;
      this.form = {};
    },

    /**
     * 提交判断是添加还是删除
     */
    handleSubmit() {
      if (this.form.ogId !== undefined) {
        this.updateSubmit();
      } else {
        this.addSumeit();
      }
    },

    /**
     * 提交修改
     */
    updateSubmit() {
      api.updateAdd(this.form).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$notification.success('修改成功!');
          this.reset();
          this.form = {};
        } else {
          this.$notification.error('修改失败!');
        }
      });
    },

    /**
     *  添加提交
     */
    addSumeit() {
      api.updateAdd(this.form).then((res) => {
        if (res.data.code === 200) {
          //添加成功
          this.$notification.success('添加成功!');
          this.reset();
          this.ediVisible = false;
          this.form = {};
        } else {
          this.$notification.error('添加失败!');
        }
      });
    },
    /**
     * 新添加的方法
     */
    addInfo() {
      this.ediVisible = true;
    },

    /**
     * 判断当前的修改还是添加
     */
    updateAndAdd(id) {
      if (id !== undefined) {
        this.updateInfo(id);
      } else {
        this.addInfo();
      }
    },

    /**
     * 修改前先查询id
     */
    updateInfo(Id) {
      this.loading = true;
      api.info(Id).then((res) => {
        this.form = res.data.data.data;
        this.ediVisible = true;
        this.loading = false;
      });
    },

    /**
     * 删除选中的方法
     */
    subitmDeleteIds() {
      api.delete(this.deleteIds).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$notification.success('删除成功!');
          this.reset();
               //发送请求
      this.getList();
        } else {
          this.$notification.error('删除失败!');
        }
      });
    },
    /**
     * 查询数据
     */
    search() {
      //获取当前的开始时间和结束时间
      if (this.pageData.createdTime) {
        this.pageData.createTime = this.pageData.createdTime[0];
        this.pageData.endTiem = this.pageData.createdTime[1];
      }

      //发送请求
      this.getList();
    },
    /**
     *  刷新查询的数据
     */
    reset() {
      this.ediVisible = false;
      this.pageData = {
        id: '',
        name: '',
        createTime: '',
        endTime: '',
        status: '',
        page: '1',
        limit: 10,
        totalCount: 0,
        totalPage: 0,
      };
      this.getList();
    },

    /**
     *  选中
     */
    selectionChange(data) {
      this.deleteIds = data;
    },
    /**
     *  选择页码
     */
    changePage(currPage) {
      this.pageData.page = currPage;
      this.getList();
    },
    //选择分页大小
    limitChange(limit) {
      this.pageData.limit = limit;
      this.getList();
    },

    /**
     *  获取当前数据
     */
    getList() {
      this.loading = true;
      var pageData=JSON.parse(JSON.stringify(this.pageData)) 
      pageData.createdTime=[]
      api.list(pageData).then((res) => {
        const page = res.data.data.page;
        this.data = page.list;
        this.pageData.page =
          page.currPage >= page.totalPage ? page.totalPage : page.currPage;
        this.pageData.limit = page.limit;
        this.pageData.totalCount = page.totalCount;
        this.pageData.totalPage = page.totalPage;
        this.loading = false;
      });
    },
    /**
     *  删除账号
     */
    submitDelete(id) {
      let data = [];
      data.push(id);
      api.delete(data).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$notification.success('删除成功!');
          this.reset();
        } else {
          this.$notification.error('删除失败!');
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
</style>
